<template>
	<view class="content">
		<!--    <Winglau14-address-auto-parse></Winglau14-address-auto-parse>-->
		<view class="top-box">
			<view class="textarea-box">
				<textarea cols="40" rows="10" v-model="address" placeholder="请粘贴您需要识别的地址"></textarea>
				<view class="absolute bottom-12 autoParseBtn right-12">
					<u-button type="primary" icon="search" size="mini" shape="circle" @touchend.prevent="autoParse"
						text="识别"></u-button>
				</view>
			</view>
		</view>
		<view class="form-content">
			<u-form label-width="160rpx" :mode="formData">
				<u-form-item label="收货人" borderBottom>
					<u-input border="none" v-model="formData.name"></u-input>
				</u-form-item>
				<u-form-item label="联系电话" borderBottom>
					<u-input border="none" v-model="formData.mobile"></u-input>
				</u-form-item>
				<u-form-item label="所在地区" borderBottom>
					<picker @change="confirmFn" :value="formData.defaultRegion" mode="region">
						<view class="flex flex-1 justify-between">
							<text class="address-form-province" v-text="formData.region"></text>
							<u-icon v-if="!formData.region" label="请选择" icon-size="24rpx" label-pos="left"
								label-color="#666" name="arrow-right" size="30rpx" color="#999"></u-icon>
						</view>
					</picker>
				</u-form-item>
				<u-form-item label="详细地址">
					<u-textarea border="none" v-model="formData.details"></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<view class="flex py-12 px-20">
			<u-checkbox-group v-model="checked" placement="column">
				<u-checkbox label="默认地址" name="默认地址" shape="circle" active-color="#6eca96">
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="footer px-12">
			<u-button type="primary" :loading="submitLoading" shape="circle" size="large" @click="submit">保存</u-button>
		</view>
	</view>
</template>
<script>
	import {
		AddressParse
	} from "@/uni_modules/Winglau14-address-auto-parse/components/Winglau14-address-auto-parse/lib/addressParseBundle";
	import {
		fetchDeliveryAddress
	} from "@/services/api";
	export default {
		data() {
			return {
				value: "",
				address: "",
				checked: [],
				formData: {
					province: "",
					city: "",
					area: "",
					details: "",
					name: "",
					mobile: "",
					region: "",
					defaultRegion: [],
				},
				submitLoading: false,
			};
		},
		methods: {
			autoParse() {
				if (!this.address) {
					return uni.showToast({
						title: "请粘贴您需要识别的地址",
						icon: "none",
					});
				}
				const address = this.address;
				const result = AddressParse.parse(address);
				if (result && result.length) {
					let html = "";
					for (let key in result[0]) {
						if (result[0][key]) {
							html += key + `:` + result[0][key] + `<br/>`;
						}
					}
					this.value = JSON.stringify(result[0]);

					console.log("值", this.value);
					const defaultRegion = [
						result[0].province || "",
						result[0].city || "",
						result[0].area || "",
					];
					const region = `${result[0].province || ""} ${result[0].city || ""} ${result[0].area || ""}`;
					this.$set(this.formData, "region", region);
					this.$set(this.formData, "defaultRegion", defaultRegion);
					Object.assign(this.formData, {
						...result[0],
						defaultRegion
					});
				}
			},
			confirmFn(res) {
				const region = `${res.detail.value[0]} ${res.detail.value[1]} ${res.detail.value[2]}`;
				const defaultRegion = [
					res.detail.value[0],
					res.detail.value[1],
					res.detail.value[1],
				];
				this.$set(this.formData, "province", res.detail.value[0]);
				this.$set(this.formData, "city", res.detail.value[1]);
				this.$set(this.formData, "area", res.detail.value[2]);
				this.$set(this.formData, "region", region);
				this.$set(this.formData, "defaultRegion", defaultRegion);
			},
			async submit() {
				const {
					name,
					mobile,
					province,
					city,
					area,
					details
				} = this.formData;
				this.submitLoading = true;
				try {
					const {
						error
					} = await fetchDeliveryAddress({
						consigneeName: name,
						consigneePhone: mobile,
						detailAddress: details,
						defaultAddress: this.checked.length > 0,
						provinceName: province,
						cityName: city,
						areaName: area,
					});
					if (!error) {
						uni.$u.toast("收货地址添加成功");
						console.log("现在页面是", prevPage)
						// 重新获取数据
						let pages = getCurrentPages(); // 获取当前的页面栈
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.$refs.addreddPopRef.open();
						setTimeout(() => {
							this.$Router.back();
						}, 1000)
					}
				} catch (e) {} finally {
					this.submitLoading = false;
				}
			},
		},
		onLoad() {},
	};
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
	}

	.form-content {
		padding: 40rpx;
		margin-top: 24rpx;
		background-color: white;

		:deep(.u-form-item__body) {
			padding: 26rpx 0 !important;
			align-items: flex-start !important;
		}
	}

	.address-form-province {
		text-align: end;
	}

	.top-box {
		padding: 24rpx 40rpx;
		background-color: white;
	}

	.textarea-box {
		position: relative;
		border: 1rpx solid #eae9e9;
		margin: 30rpx 0;
		padding-bottom: 70rpx;
		border-radius: 12rpx;
	}

	.autoParseBtn {
		z-index: 1;
	}

	textarea {
		padding: 20rpx;
		width: 100%;
		height: 190rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 30rpx;
		font-weight: 600;
		padding-top: 30rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		width: 100%;
		background: #fff;
		padding-bottom: 24px;
	}
</style>